<template>
  <div class="Reg_log_style">
    <div class="logo"><a href="#"><img src="images/logo.png"/></a></div>
    <div class="regist_style">
      <div class="left_img"><img src="images/bg_name_03.png"/></div>
      <div class="right_img"><img src="images/bg_name_05.png"/></div>
      <form id="myform" class="sign_area" autocomplete="off">
        <div class="title_name"><span>注册</span><span style="margin-left: 444px" @click="to_login">登录</span></div>
        <div class="regist_m_1">
          <div class="add_regist">
            <ul>
              <li class="frame_style"><label class="user_icon"></label><input name="" type="text" id="user_text" v-model="username"
                                                                              placeholder="用户名/邮箱"/>
              </li>
              <li class="frame_style"><label class="password_icon"></label><input name="tbPassword" type="password"
                                                                                  id="tbPassword"
                                                                                  v-model="password"
                                                                                  class="ywz_zhuce_kuangwenzi1 text_Password"
                                                                                  placeholder="6-16位，由字母（区分大小写）、数字、符号组成"/>
              </li>
              <li class="frame_style"><label class="password_icon"></label><input name="" type="password" v-model="t_password"
                                                                                  id="confirm_pwd_text"/><i>确认密码</i>
              </li>
              <li class="frame_style"><label class="Codes_icon"></label><input name="" type="text" id="Codes_text" v-model="captcha"/><i>验证码</i>
                <div class="Codes_region">
                  <img :src="imgPath" @click="checkImg" alt="">
                </div>
              </li>
            </ul>
            <div class="auto_login clearfix">
              <p class="clearfix">
                <el-checkbox v-model="checked">我已阅读相关规定</el-checkbox>
                <input id="autoLoginCheck" type="hidden">
                <span id="agreement_tips" class="auto_tips" style=""></span>
              </p>
              <a href="#" target="_blank" class="forget_pswd" tabindex="-1">《商城用户协议》</a>
            </div>
            <div class="center clearfix"><a class="btn_pink" id="btn_signin" href="javascript:void(0)"
                                            @click="register">立即注册</a>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'


export default {
  name: "register",
  data() {
    return {
      imgPath:'/admin/user/captcha',
      checked: false,
      captcha:'',
      username:'',
      t_password:'',
      password:''
    }
  },
  methods: {
    //跳转到登录界面
    to_login() {
      this.$router.push('/login')
    },
    //注册
    register() {
      //先判断是否同意相关规定
      if (!this.checked) {
        ElMessage.warning('请先同意相关规定')
        return false
      }
      // 再判断表单数据是否填写完整，如果填写完整即可注册
      if (!this.username === this.t_password){
        ElMessage.warning('请填入相同密码')
      }
      // 携带账号密码验证码请求后端
      axios({
        method:"put",
        url:"/admin/user/register",
        headers:{
          'captcha':this.captcha
        },
        data:{
          username:this.username,
          password:this.password
        }
      }).then(res=>{
        ElMessage.success(res.data.message)
        this.$router.push("/login")
      }).catch(error=>{
        console.log(error)
      })

    },
    checkImg(){
      this.imgPath = this.imgPath + '?' +Math.random(); 
    }
  },
  created(){
    
  }
  // ,
  // async created(){
  //   try{
  //     const response = await axios.get('/admin/user/captcha');
  //     this.captcha = response.data.data.captcha
  //     console.log(this.captcha)
  //   }catch(error){
  //     console.log(error)
  //   }
  // },
  // computed:{
  //   captchaImage(){
  //     if(this.captcha){
  //       const base64String = btoa(this.captcha);
  //       return 'data:image/png;base64,${base64String}';
  //     }
  //     return '';
  //   }
  // }
}
</script>

<style>
@import "../../style/css/common.css";
@import "../../style/css/style.css";
</style>

